<template>
    <klScroll
        :list="list"
        :scrollHeight="scrollHeight"
        :pageOption="pageOption"
        @bottom="bottom"
        @scroll="scroll"
    >
        <div class="flex-wrap flex-justify-between flex-item-wrap p-l-10 p-r-10">
            <userArticle
                v-for="(item, index) in list"
                :key="index"
                :type="type"
                :articleInfo="item"
                :isHandle="isHandle"
                @goPage="goPage"
                @delete="deleteFun"
                @openPrevew="openPrevew"
            ></userArticle>

            <div :class="[isMaxScreen ? 'w-300' : 'w-200']" v-for="item in 10" :key="item"></div>
        </div>
    </klScroll>
</template>

<script>
import klScroll from '@/mixins/components/kl-scroll/index.vue'
import userArticle from '@/views/blog/home/home/components/user-article.vue'
export default {
    components: {
        userArticle,
        klScroll
    },
    props: {
        type: {
            type: String,
            default: 'common',
        },
        list: {
            type: Array,
            default: () => [],
        },
        pageOption: {
            type: Object,
            default: () => {},
        },
        scrollHeight: {
            type: Number,
            default: 0,
        },
        isHandle: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            isMaxScreen: false,
        }
    },
    watch: {
        list: {
            handler(val) {},
            deep: true,
            immediate: true,
        },
    },
    mounted() {
        // 获取可视区宽度
        const { width } = this.getViewportSize()
        if (width > 1920) {
            this.isMaxScreen = true
        }
    },
    methods: {
        openPrevew(row) {
            this.$emit('openPrevew', row)
        },
        deleteFun(row) {
            this.$emit('delete', row)
        },
        bottom() {
            this.$emit('bottom')
        },
        // 阅读更多
        goPage({ row: article }, type = 0) {
            // ac类型直接预览
            if (
                article &&
                this.getType(article.class_id) === 'object' &&
                [2, 3].includes(+article.class_id.class_type)
            ) {
                let { class_type } = article.class_id
                // 前端ac页面的同步数据
                if (class_type == 2) {
                    // 如果首位是/需要去掉
                    window.open(this.$baseURL + `${article.article_ac_url.replace(/^\//, '')}`)
                }
                return
            }

            if (type) {
                this.$router.push(`/blog/page/${article.article_id._id}`)
                return
            }
            this.$router.push(`/blog/page/${article._id}`)
        },
        scroll(scrollTop) {
            this.$emit('scroll', scrollTop)
        },
    },
}
</script>

<style lang="scss" scoped></style>
